<template>

<div style="width: 100%;">
  <div class="content-section">
    <div class="question-content">
     <span v-html="renderMath(question.content) "></span>
      <div v-if="question.image" style=" display: flex;  justify-content: center; margin-top: 10px; max-height: 120px;width: 100%;">
          <img :src="question.image" alt=""  style="max-height: 100%; border-radius: 12px; max-width: 100%; object-fit:contain;"/>
        </div>
    </div>
    <div class="options-section" >
      <div v-for="(option, index) in question.answerVoList" class="option-item"
        :class="{ 'correct': question.correctAnswerVo.optionIds.includes(option.id) }">
        <div style="display: flex;  max-width: 90%;">
          <div class="option-key">{{ option.abc }}</div>
        <div class="option-text"><div v-html="renderMath( option.content )"></div></div>
      </div>

        <div v-if="question.correctAnswerVo.optionIds.includes(option.id)"  class="answer-indicator correct">
              答案
          <span class="indicator-dot"></span>
        </div>
        <!-- <i v-if="question.correctAnswerVo.optionIds.includes(option.id)" class="iconfont icon-check"></i> -->
      </div>
    </div>
  </div>
  <div class="card-footer">
    <div class="difficulty-level" :style="{ backgroundColor: getDifficultyColor(question.difficulty) }">
    </div>
    <div class="action-btns">
      <span @click.stop="toggleExplanation(question)">
        <i class="iconfont icon-info"></i> 解析
      </span>
    </div>
  </div>

  <transition name="slide">
          <div v-if="question.showExplanation" class="explanation-panel">
            <div class="explanation-title">解析说明：</div>
            <div class="explanation-text"> <span v-html="renderMath(question.analysis)"></span>  </div>
          </div>
        </transition>
</div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount, defineProps } from 'vue';
const props = defineProps(["question"]);
import DOMPurify from 'dompurify';
import katex from 'katex';
import 'katex/dist/katex.min.css';

const sanitizedHtml = ((html) => {
  return DOMPurify.sanitize(html)
});

const renderMath = (text) => {
  if (!text) return '';
  // 匹配行内公式 $...$
  let result = text.replace(/\$(.*?)\$/g, (_, m) =>
    katex.renderToString(m.trim(), {
      throwOnError: false,
      strict: false
    }));

  // 匹配块级公式 $$...$$
  result = result.replace(/\\$\$(.*?)\\$\$/gs, (_, m) =>
    katex.renderToString(m.trim(), {
      displayMode: true,
      throwOnError: false,
      strict: false
    }));

  return result;
};
const questions = ref([]);

const getDifficultyColor = (level) => {
  const colors = {
    '简单': '#4CAF50',
    '中等': '#FFA726',
    '困难': '#EF5350'
  };
  return colors[level] || '#666';
};

const toggleSelection = (question) => {
  question.selected = !question.selected;
};

const toggleExplanation = (question) => {
  question.showExplanation = !question.showExplanation;
};



</script>

<style scoped lang="scss">
$primary-color: #c0f37a;
$secondary-color: #2196F3;
$border-radius: 8px;

.quiz-container {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  font-family: ui-sans-serif, system-ui, sans-serif;

  font-size: 1.18cap;
}

.filter-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.compact-input {
  padding: 0.8rem 2.5rem 0.8rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: $border-radius;
  position: relative;
  flex: 1;
  transition: all 0.2s;

  &:focus {
    border-color: $primary-color;
    box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
  }

  &::placeholder {
    color: #999;
    font-size: 0.8rem;
  }
}

.filter-item {
  position: relative;
  flex: 1;

  .iconfont {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 1rem;
  }
}

.primary-btn {
  padding: 0.8rem 1.5rem;
  // background: linear-gradient(135deg, $primary-color 0%, darken($primary-color, 10%) 100%);
  color: white;
  border: none;
  border-radius: $border-radius;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    // background: linear-gradient(135deg, lighten($primary-color, 5%) 0%, $primary-color 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

.questions-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}



.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.type-tag {
  background: $primary-color;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.source-info {
  color: #666;
  font-size: 0.9rem;
}

.content-section {
  margin-bottom: 0.1rem;
}

.question-content {
  background: #f9f9f9;
  padding: 0.7rem;
  border-radius: $border-radius;
  margin-bottom: 0.7rem;
  position: relative;
max-width: 100%;
  &::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 10px;
    width: 3px;
    height: 30px;
    background: $primary-color;
  }
}

.content-tag {
  background: $primary-color;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  margin-right: 0.5rem;
}

.options-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 0.6rem;
  background: white;
  border: 1px solid #eee;
  border-radius: $border-radius;
  transition: all 0.2s;
  position: relative;
  justify-content: space-between;
  &:hover {
    border-color: $primary-color;
  }

  &.correct {
    border-color: $primary-color;

    .option-key {
      background: $primary-color;
    }
  }
}

.option-key {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 3px;
  margin-right: 1rem;
}

.icon-check {
  color: $primary-color;
  margin-left: auto;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.difficulty-level {
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  color: white;
  font-size: 0.9rem;
}

.action-btns {
  color: rgba(0, 0, 0, 0.639);
  cursor: pointer;
  font-size: medium;
  font-weight: 600;
  text-decoration: 3px underline #3bd16a;

  &:hover {
    text-decoration: 3px underline #fc1307;

  }
}

.explanation-panel {
  padding: 1rem;
  background: #f9f9f9;
  border-radius: $border-radius;
  margin-top: 0.2rem;
}

.slide-enter-active,
.slide-leave-active {
  transition: max-height 0.3s ease-out;
}

.slide-enter-from,
.slide-leave-to {
  max-height: 0;
  overflow: hidden;
}
.answer-indicator {
  display: flex;
  align-items: center;
  right: 0px;
  gap: 4px;
}

.answer-indicator.correct {
  color: #4caf50;
}



.indicator-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 1rem;
}
</style>
